Conanan

# 标准内置对象—Array

数组对象，继承自iterable类型

# 创建

总共四种方式

// 下面4种打印值都一样
var arr1 = [1, 2, 3];
console.log(arr1);

var arr2 = new Array(1, 2, 3);
console.log(arr2);

var arr3 = Array(1, 2, 3);
console.log(arr3);

var arr4 = Array.of(1, 2, 3);
console.log(arr4);
// ======================================
// 下面打印的都是lenght属性值为5的空数组
var arr5 = new Array(5);
console.log(arr5);

var arr6 = Array(5);
console.log(arr6);
// 下面才可以创建单个值的数组
var arr7 = [5];
console.log(arr7);

var arr8 = Array.of(5);
console.log(arr8);

多维数组

var arr = [];
for (let i = 0; i < 5; i++) {
  arr[i] = [];
  for (let j = 0; j < 4; j++) {
    arr[i][j] = i + j;
  }
}
console.log(arr); // 5*4二维数组

# 属性

  • length：数组的长度=最大角标+1

    与 Java 不同的是数组长度可变可以设置值为 0从而清空，数组元素的类型可变；Java 中是final长度不可修改

# 方法

# 遍历 & 取值

  • 借助length

  • 使用for ... in遍历的是属性。对于数组遍历其 length，也可以便利属性的 key

  • 使用for ... of遍历的是值，ES6 添加的方法，只用来遍历iterable类型

  • peek()取最后一个元素，不删除

  • forEach

    var arr1 = [1, 2, 3];

for (let index = 0; index < arr1.length; index++) {
  const element = arr1[index];
  console.log(element);
}

for (const index in arr1) {
  if (arr1.hasOwnProperty(index)) {
    const element = arr1[index];
    console.log(element);
  }
}

for (const iterator of arr1) {
  console.log(iterator);
}

// self 为数组本身
arr1.forEach((element, index, self) => {
  console.log(element, index, self);
});

# 添加

  • 直接访问不存在的数组下标，即可在该下标添加元素，其他空的为undefined，如arr[99]=5

  • push()：向数组的末尾添加一个或更多元素，并返回新的长度。栈模式（FILO）

    如果添加的是一个数组，这个时候把数组当做一个整体字符串添加进去，类似 java 中的 add

  • unshift(num...)：向数组前面添加元素，可多个

    var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

console.log(arr1.push(4)); // 4（长度）
console.log(arr1.pop()); // 4（值）
console.log(arr1.push(arr2)); // 4（长度）
console.log(arr1); // [1, 2, 3, Array(3)]

# 删除

  • 通过length属性，可以截断数组甚至清空

  • splice(index,n[, num...])：从 index 位置开始删除 n 个元素，并添加任意个元素，index 为 0 时为添加元素

    它可以进行增删改操作！

    var arr1 = [1, 2, 3];
console.log(arr1); // [1,2,3]

arr1.splice(0, 0, -1, 0);
console.log(arr1); // [-1,0,1,2,3]

arr1.splice(1, 2, 6, 7, 8);
console.log(arr1); // [-1,6,7,8,2,3]

  • pop()：删除最后一个元素，返回删除的那个元素。栈模式（FILO）

  • shift()：删除第一个元素，返回删除的那个元素。队列模式（FIFO）

# 反转、分割、拼接、连接

  • reverse()：颠倒数组中的元素的顺序，改变原有数组顺序。

  • split(参数)：将字符串按照指定的分隔符分割为数组，不传参则整个字符串变为数组，原有字符串不变

  • join(参数)：将数组中的元素按照指定的分隔符拼接为字符串。不传参数默认按,拼接，不改变原数组

  • concat：数组的连接，类似 Java 中的 addAll，但是不改变原数组

    var s = "hello world";
console.log(s); // hello world

// 此处没改变原数组顺序是由于split()函数不改变顺序，所以需要用变量接收
var ss = s
  .split("")
  .reverse()
  .join("");
console.log(ss); // dlrow olleh

var arr1 = [1, 2, 3];
arr1.reverse();
console.log(arr1); // [3,2,1]

var str = "1,2,3";
console.log(str.split(",")); // ["1","2","3"]

var arr1 = [5, 1, 2, 3];
var arr2 = [5, 2, 7];
var arr3 = arr1.concat(arr2);
console.log(arr1); // [5, 1, 2, 3]
console.log(arr3); // [5, 1, 2, 3, 5, 2, 7]

# 排序

  • sort()，默认升序。改变原数组

    var arr1 = [5, 1, 2, 3];
arr1.sort();
console.log(arr1); // [1,2,3,5]

arr1.sort((a, b) => {
  return b - a; // 数字可以直接减，但是其他的都得比较
});
console.log(arr1); // [5,3,2,1]

# slice 切片

  • slice()，和splice()单词删除很像

    var arr1 = [1, 2, 3, 4, 5];
console.log(arr1.slice(1, 2)); // [2]，第二个参数为索引，不是长度
console.log(arr1.slice(1, -2)); // [2,3]，第二个参数负数时代表倒数第几个，从-1开始，还是左闭右开
console.log(arr1.slice(1)); // [2,3,4,5]，第二个参数不传递则到尾部

# map & reduce & filter

  • map，原数组不变

    var arr1 = [1, 2, 3, 4, 5];
var arr2 = arr1.map((item, index, arr) => {
  return item * 2;
});
console.log(arr2); // [2,4,6,8,10]
// 简写 item=> item*2
var arr3 = arr1.map(item => item * 2);
console.log(arr3);

  • reduce，归纳（用于汇总），原数组不变

    var arr1 = [1, 2, 3, 4, 5];
var arr2 = arr1.reduce((previous, current, index, arr1) => {
    return previous + current;
});
console.log(arr2); // 15
//==========================================================
// 0为初始值
var arr3 = arr1.reduce((previous, current, index, arr1) => {
    return previous + current;
}, 0);
console.log(arr3); // 15
//==========================================================
// 注意reduce对象
return this.books.reduce((previous, current, index, arr) => {
    return previous + current.price * current.count;
}, 0);

  • filter，过滤，返回 boolean 值，为 true 的当前值才能保留，原数组不变

    var arr1 = [1, 2, 3, 4, 5];
var arr2 = arr1.filter((item, index, arr1) => {
  return item % 2 === 0;
});
console.log(arr2); // [2,4]

# every some 条件测试

  • every ，some

    var arr1 = [1, 2, 3, 4, 5];
var b1 = arr1.every((item, index, arr1) => {
  return item > 1;
});
console.log(b1); // false，所有都得大于1
//===================================
var b2 = arr1.some((item, index, arr) => {
  return item >= 5;
});
console.log(b2); // true，只要有一个大于等于5

# destructuring 解构

  • 构造数组的反向操作

    var arr1 = [1, 2, 3, 4, 5];
var [a1, b1] = arr1;
var [a2, b2, c2, d2, e2] = arr1;
var [a3, b3, c3, d3, e3, f3] = arr1;
var [, b4] = arr1;
var [, b4, , d4] = arr1;

console.log(a1); // 1
console.log(e2); // 5
console.log(f3); // undefined
console.log(b4, d4); // 2 4

    可用于接受返回多个参数数组的方法并解构

    function multipleReturns() {
  let name = "conanan";
  let age = 18;
  return [name, age];
}
var [myName, myAge] = multipleReturns();
console.log(myName); // conanan
console.log(myAge); // 18

# rest 解构

  • 接收多个参数

    var arr = [1, 2, 3, 4, 5];

var [a1, b1, ...arr1] = arr;
console.log(a1); // 1
console.log(arr1); // [3,4,5]

var [a2, , c2, ...arr2] = arr;
console.log(c2); // 3
console.log(arr2); // [4,5]

    可用于函数接收不确定个数参数

    function multipleParams(...arr) {
  console.log(arr);
}
multipleParams(1, 2, 3); //[1,2,3]

← 标准内置对象—RegExp →